﻿PuppetPlay.Background = (function () {
    var bottomBarHeight = PuppetPlay.Setting.TOOL_BAR_HEIGHT;

    return {
        renderTo: function (layer) {
            var util = PuppetPlay.Util;
            var rs = PuppetPlay.Sources.Images.background;
            var zoomFactor = util.getZoomFactor();
            var validWidth = document.documentElement.clientWidth;
            var validHeight = document.documentElement.clientHeight;

            //fix bug: somtimes pointer up on blank area may not fire pointerup event
            var whiteBg = new Kinetic.Rect({
                width: validWidth,
                height: validHeight,
                fill: 'white'
            });
            layer.add(whiteBg);

            //add the bottom bar
            var bottomBar = new Kinetic.Rect({
                y: validHeight - bottomBarHeight,
                width: validWidth,
                height: bottomBarHeight,
                fill: 'black'
            });
            layer.add(bottomBar);

            //add a pot
            var pot = new PuppetPlay.Image(util.apply(rs.pot, {
                y: (validHeight - bottomBarHeight - rs.pot.height * zoomFactor) / zoomFactor
            }));
            layer.add(pot);

            //add a castle
            var castle = new PuppetPlay.Image(util.apply(rs.castle, {
                x: (validWidth - rs.castle.width * zoomFactor) / zoomFactor,
                y: (validHeight - bottomBarHeight - rs.castle.height * zoomFactor) / zoomFactor //validHeight - bottomBarHeight - rs.castle.height
            }));
            layer.add(castle);

            //add the top curtain
            var curtain = new Kinetic.Shape({
                drawFunc: function (context) {
                    var w = document.body.clientWidth;
                    var curtain01 = rs.curtain01;
                    var n = Math.ceil(w / curtain01.width / zoomFactor);
                    for (var i = 0; i < n; ++i) {
                        context.drawImage(curtain01.obj, i * curtain01.width * zoomFactor, 0, curtain01.width * zoomFactor, curtain01.height * zoomFactor);
                    }

                    var curtain02 = rs.curtain02;
                    var n = Math.ceil(w / curtain02.width / zoomFactor);
                    for (var i = 0; i < n; ++i) {
                        context.drawImage(curtain02.obj, i * curtain02.width * zoomFactor, 0, curtain02.width * zoomFactor, curtain02.height * zoomFactor);
                    }
                }
            });
            layer.add(curtain);

            //add head for the bottom track
            var trackY = validHeight - 90;
            var trackHead = new PuppetPlay.Image(util.apply(rs.trackHead, {
                zoomFactor: 1,
                x: PuppetPlay.Setting.HORIZONTAL_TRACK_MARGIN - rs.trackHead.width,
                y: trackY
            }));
            layer.add(trackHead);

            //add body for the bottom track
            var trackBody = new Kinetic.Rect({
                x: PuppetPlay.Setting.HORIZONTAL_TRACK_MARGIN,
                y: trackY,
                fill: {
                    image: rs.trackBody.obj,
                    repeat: 'repeat-x'
                },
                width: validWidth - PuppetPlay.Setting.HORIZONTAL_TRACK_MARGIN * 2,
                height: rs.trackBody.height
            });
            layer.add(trackBody);

            //add tail for the bottom track
            var trackTail = new PuppetPlay.Image(util.apply(rs.trackTail, {
                zoomFactor: 1,
                x: validWidth - PuppetPlay.Setting.HORIZONTAL_TRACK_MARGIN,
                y: trackY
            }));
            layer.add(trackTail);
        }
    };
})();